<!-- 供应商认证记录 -->
<template>
  <div class="base-info">
    <a-tabs>
      <a-tab-pane
        v-for="item in data"
        default-active-key="1"
        :key="item.key"
        :title="item.title"
      >
        <!-- 主要内容 -->
        <div
          ><returnedRecord
            v-if="item.key === '1' && returnedData.length"
            :titleData="returnedData" />
          <div v-if="!returnedData.length"> <a-empty /> </div
        ></div>

        <!-- 主要内容 -->
        <div
          ><Invoicerecord
            v-if="item.key === '2' && InvoiceData.length"
            :titleData="InvoiceData"
        /></div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
  import { ref, defineAsyncComponent } from 'vue';
  import { useRoute } from 'vue-router';
  import { GetArchivesDetaliType } from '@/api/buy-management/archives-details/index';
  import { GetClientOrderDetail } from '@/api/order-management/client-order/index';

  let returnedRecord = defineAsyncComponent(
    () => import('./components/returned-record-table/index.vue')
  );

  let Invoicerecord = defineAsyncComponent(
    () => import('./components/Invoice-record-table/index.vue')
  );

  const route: any = useRoute();
  // const formData = JSON.parse(route.query.record);
  const id = Number(route.query.id);
  const returnedData = ref([]);
  const InvoiceData = ref([]);
  const getData = async () => {
    const res = await GetClientOrderDetail({ id });
    returnedData.value = res.collectionRecords;
    InvoiceData.value = res.invoiceRecords;
  };
  getData();

  const data = ref([
    {
      key: '1',
      title: '回款记录',
    },
    {
      key: '2',
      title: '发票记录',
    },
  ]);
</script>

<style scoped lang="less">
  .base-info {
    padding: 0 40px;
  }
</style>
